<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="标段信息" name="1">
        <TendersInfoModel ref="refTendersInfo" />
      </el-tab-pane>
      <el-tab-pane label="工区信息" name="2">
        <WorkAreaList ref="WorkAreaListRef" />
      </el-tab-pane>
      <el-tab-pane label="组织信息" name="3">
        <OrganizationList @modifOrganization="addOrganizationInfo" ref="organizationRef" />
      </el-tab-pane>
      <el-tab-pane label="班组信息" name="4">
        <GroupList @modifGroup="addGroupInfo" ref="GroupListRef" />
      </el-tab-pane>
    </el-tabs>

    <div class="button_box">
      <el-row>
        <el-button type="text" plain icon="el-icon-refresh" @click="onRefreshClick">刷新</el-button>
        <el-button
          type="text"
          plain
          icon="el-icon-circle-plus-outline"
          v-show="activeName == 4"
          @click="addGroupInfo"
        >添加班组</el-button>
        <el-button
          type="text"
          plain
          icon="el-icon-circle-plus-outline"
          v-show="activeName == 3"
          @click="addOrganizationInfo"
        >添加组织</el-button>
        <el-button
          type="text"
          icon="el-icon-circle-plus-outline"
          plain
          v-show="activeName == 2"
          @click="showDailogModel(activeName)"
        >添加工区</el-button>
        <el-button
          type="text"
          icon="el-icon-circle-plus-outline"
          plain
          v-show="activeName == 1"
          @click="showDailogModel(activeName)"
        >添加标段</el-button>
      </el-row>
    </div>

    <AddOrganizationModel ref="organizationModelRef" @refresh="onRefreshClick" />
    <AddGroupModel ref="AddGroupModelRef"  @refresh="onRefreshClick" />
  </div>
</template>

<script>
import OrganizationList from "./organize/OrganizationList";
import GroupList from "./organize/GroupList";
import TendersInfoModel from "./organize/TendersInfoModel";
import WorkAreaList from "./organize/WorkAreaList";
import AddOrganizationModel from "./organize/models/AddOrganizationModel";
import AddGroupModel from "./organize/models/AddGroupModel";
import HttpInterface from "../../util/httpInterface";
import { mapActions } from "vuex";

export default {
  components: {
    OrganizationList, GroupList, AddOrganizationModel, AddGroupModel, TendersInfoModel, WorkAreaList
  },
  data() {
    return {
      activeName: "1",
    }
  },

  mounted() {
    HttpInterface.getUserInfo(() => {
      this.onRefreshClick();
      this.getTendersInfo();
      this.getDutymanageList();
      this.getWorkAreaInfo();
    })
  },

  methods: {
    ...mapActions(["getTendersInfo", "getDutymanageList", "getWorkAreaInfo"]),

    handleClick() {
      this.onRefreshClick();
    },

    // 添加组织信息
    addOrganizationInfo (depId) {
      if (typeof(depId) == "number") {
        this.$refs.organizationModelRef.show(depId);
      } else {
        this.$refs.organizationModelRef.show(0);
      }
    },

    // 添加班组信息
    addGroupInfo (row) {
      if (typeof(row.id) == "number") {
        this.$refs.AddGroupModelRef.show(row);
      } else {
        this.$refs.AddGroupModelRef.show(0);
      }
    },

    // 添加标段 / 工区
    showDailogModel(num) {
      if (num == 1) {
        this.$refs.refTendersInfo.show();
      } else if (num == 2) {
        this.$refs.WorkAreaListRef.showDailog();
      }
    },

    onRefreshClick() {
      switch (this.activeName) {
        case "1":
          this.$refs.refTendersInfo.getTendersInfo();
          break;
        case "2":
          this.$refs.WorkAreaListRef.getWorkAreaList();
          break;
        case '3':
          this.$refs.organizationRef.getDutymanagelist();
          break;
        case "4":
          this.$refs.GroupListRef.getGroupList();
          break;
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
